<template>
	<div class="home">
		
		
		<div class="home_header">
			<router-link class="header" to="/search" tag="div"><van-search shape="round" :disabled="true" background="#4fc08d" placeholder="请输入搜索关键词" /></router-link>
			<!-- 把底部栏封装成组件   三个页面  首页  发布 我的  调用 -->

			<van-tabs 
			@click="switchTab" 
			v-model="active" 
			:color="baseColor" border :sticky="true" line-width="20px">
				<van-tab v-for="item in cate_list" :key="item._id" :title="item.name"></van-tab>
			</van-tabs>
		</div>
		
		
		
		<div style="height: 100px;"></div>

		<!--  不让他一进来就调用  -->
		<!-- 借助van-list实现上拉加载 -->
		<div class="content">
			
			
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			
			<van-list v-if="list.length" v-model="loading" :finished="finished" finished-text="已经加载完毕~" :immediate-check="false" @load="get_article_list">
				<div class="article_list" v-for="item in list" @click="navTo(`/article?_id=${item._id}`)">
					<div class="list_item">
						<div class="title">{{ item.title }}</div>
			
						<div class="img_type1" v-if="item.imageSrc && item.imageSrc.length == 1">
							<video :src="img" v-for="img in item.imageSrc" v-if="img.endsWith('mp4')">
								<source src="myvideo.mp4" type="video/mp4">
								</source>
							</video>
							<div v-else>
							<img :src="img" v-for="img in item.imageSrc" />
							</div>
							</div>
						<div class="img_type2" v-if="item.imageSrc && item.imageSrc.length > 1"><img :src="img" v-for="img in item.imageSrc" /></div>
			
						<div class="aricle_bottom">
							<span>{{ item.author }}</span>
							<span>{{ item.comment }}评论</span>
							<span>{{ item.time|formatTime }}</span>
						</div>
					</div>
				</div>
			</van-list>
			
			
			</van-pull-refresh>
			
			

		</div>
	</div>
</template>

<script>
// @ is an alias to /src
import {get_cate_list} from '@/utils/api.js'


export default {
	name: 'Home',
	data() {
		return {
			cate_list: [], //  分类的数据   
			active: 0,
			loading: true, //  是否正在加载中  是否在转圈   如果正在转圈 不会请求数据
			finished: false, //  数据是否加载完毕  如果加载完毕 也不再请求数据
			list: [], //  文章列表数据
			skip: 0,
			limit: 10,
			refreshing:false,//  是否正在刷新
		};
		
		 
		
	},
	components: {},
	// 页面一加载 自动执行
	created() {
		this.get_cate_list();
	},
	methods: {
		navTo(url){
			this.$router.push(url)
		},
		get_cate_list() {
			
		get_cate_list().then(res => {
					console.log(res);
					if (res.code == 0) {
						this.cate_list = res.data;
						console.log(this.cate_list);
						
						localStorage.setItem('cate_list',JSON.stringify(this.cate_list))

						//  拿到每日头条的ID  把他当成默认的分类ID
						// 用这个参数去请求下一个接口
						this.get_article_list();//   
						
					} else {
						this.$toast.fail(res.msg);
					}
				})
				.catch(err => {});
				
				
				
		},
		// 609e99d6935e5b0001eaf4f2
		get_article_list(Refresh) {
			let cate_id = this.cate_list[this.active]._id; //获取到高亮的那个数据的ID

			let skip = this.list.length; //  0 10 20 30
			
			if(Refresh){
				skip = 0
			}
			
			this.loading = true;
			let { limit } = this;
			this.$http
				.post('/api/get_article_list', {
					cate_id,//  分类的ID  
					skip, // 跳过的项   从哪一条开发取
					limit //一次返回 10
				})
				.then(res => {
					console.log(res);
					
				    if(Refresh){
						 this.refreshing = false;//  接口请求成功  结束刷新
						 this.list = [];//  清空   
					}
					this.list.push(...res.data)
					// this.list = this.list.concat(res.data); // 数据拼接
					// 10 +新加载的数据
					// 数据需要累加
					// 什么时候算 完成 finished
                    // 19>=19
					if (this.list.length >= res.count) {
						this.finished = true; //  
					} else {
						this.loading = false;
					}
				})
				.catch(err => {});
		},
		//  点击切换
		switchTab() {
			this.onRefresh(); 
		},
		// 下拉刷新
		onRefresh(){
			this.finished = false;   //  
			this.get_article_list('Refresh');
			

			
		}
		
	}
};
</script>

<style scoped="scoped">
/deep/ .van-tabs__line {
	bottom: 6vw;
}
</style>

<style lang="scss">
.van-tabs__wrap--scrollable .van-tab {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.home_header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	z-index: 999;
}
.content {
	width: 100%;
	height: 100%;
	padding-bottom: 100px;
	background: #fff;
}
.van-list {
}
.article_list {
	padding: 0 20px;
	.list_item {
		width: 100%;
		padding: 12px 0 0 0;
		// overflow: hidden;
		white-space: pre-wrap;
		.title {
			margin: 0 0 10px 0;
		}
	}
	.img_type1 {
		width: 100%;

		img {
			width: 100%;
			height: 420px;
		}
	}
	.img_type2 {
		width: 100%;
		display: flex;
		overflow: hidden;
		img {
			width: 32%;
			margin-right: 2%;
		}
	}

	.aricle_bottom {
		display: flex;
		height: 40px;
		align-items: center;
		color: #888;
		border-bottom: 1px solid #eee;
		font-size: 14px;
		span {
			margin-right: 20px;
		}
	}
}
</style>
